<template>
  <Back />
  <div class="bg-#fafafa">
    <van-image width="100%" height="300px" :src="product.img" fit="contain" />
    <div class="title">
      {{ product.name }}
    </div>

    <div class="intro">
      <p>{{ t('shop.product.intro') }}</p>
      <div>
        {{ product.intro }}
      </div>
    </div>

    <div class="action">
      <div class="flex justify-between m-b-10px">
        <div>
          <div class="color-#FB553C font-size-1.4rem">{{ price }}</div>
        </div>
        <div>
          <van-config-provider :theme-vars="themeVars">
            <van-stepper v-model="order.amount" theme="round" button-size="22" max="100" disable-input />
          </van-config-provider>
        </div>
      </div>
      <div class="flex justify-between">
        <div class="w-46%">
          <van-button plain block @click="addCart">{{ t('shop.product.cart') }}</van-button>
        </div>
        <div class="w-46%">
          <van-button color="#3aa1a2" block @click="buy">{{ t('shop.product.buy') }}</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const { t } = useI18n()

const store = useAppStore()
const router = useRouter()

const order = ref<ApiOrderProductInfo>({} as ApiOrderProductInfo)

const themeVars = reactive({
  stepperButtonRoundThemeColor: '#3aa1a2'
})

onMounted(() => {
  console.log('sss', store, store.product)
  if (!store.product || !store.product.id) {
    router.replace('/home')
    return
  }
  order.value.amount = 1
  order.value.id = new Date().getTime()
  order.value.productId = product.value.id
  order.value.productNameZh = product.value.nameZh
  order.value.productNameRu = product.value.nameRu
  order.value.productImg = product.value.icon
  order.value.size = product.value.size[0].name
  order.value.price = product.value.size[0].price
  order.value.cold = product.value.cold[0]

  order.value.cateId = product.value.cate!.id
  order.value.cateName = product.value.cate!.name
  order.value.cateDrink = product.value.cate!.drink
  order.value.cateSticker = product.value.cate!.sticker

  let stant = (product.value.sugar || []).find(x => x == 100)
  if (!stant) stant = product.value.sugar[0]
  order.value.sugar = stant
})

const product = computed(() => store.product || ({} as ApiProductVO))

const price = computed(() => order.value.amount * order.value.price)

const changeOpt = (value: any, type: number) => {
  if (type == 0) {
    order.value.size = value.name
    order.value.price = value.price
  } else if (type == 1) {
    order.value.cold = value
  } else {
    order.value.sugar = value
  }
}

function addCart() {
  store.products.push(order.value)
  router.replace('/home/product')
}

function buy() {
  sessionStorage.setItem('buyInfo', JSON.stringify(order.value))
  router.push('/submit?t=1')
}
</script>
<style lang="scss" scoped>
.title {
  font-size: 1.8rem;
  padding: 0 16px;
  line-height: 50px;
  border-bottom: 1px solid #dcdcdc;
  background-color: #fff;
}
.options {
  padding: 16px;
  background-color: #fff;
  section {
    margin-bottom: 14px;
    &:last-child {
      margin-bottom: 0px;
    }
    p {
      font-size: 1.4rem;
      padding: 0;
      margin: 0 0 10px 0;
    }
    div {
      display: flex;
      flex-wrap: wrap;
    }

    span {
      font-size: 1.4rem;
      border-radius: 6px;
      padding: 4px 12px;
      border: 1px solid #c0c0c0;
      margin: 0 10px 10px 0;
      &:last-child {
        margin-right: 0px;
      }
    }
    .active {
      background-color: #3aa1a2;
      color: #fff;
      border: 1px solid #3aa1a2 !important;
    }
  }
}
.intro {
  margin-top: 1.2rem;
  background-color: #fff;
  padding-bottom: 110px;
  p {
    padding: 0 16px;
    margin: 0;
    font-size: 1.4rem;
    line-height: 3.6rem;
    border-bottom: 1px solid #dcdcdc;
  }
  div {
    padding: 16px;
    color: #666;
    font-size: 1.2rem;
  }
}

.action {
  position: fixed;
  bottom: 0;
  width: 100vw;
  background-color: #fff;
  border-top: 1px solid #dcdcdc;
  padding: 12px;
  box-sizing: border-box;
}
</style>
